<template>
    <div class="video-list" v-loading="loading">
        <div class="video-box">
            <div class="input-box">
                <span class="input-title" style="margin-left: 0px;">活动名称</span>
                <el-input style="width: 200px;" clearable v-model.trim="paramsList.collectionActivityName" @keyup.enter.native="getList(1)"></el-input>
                <span class="input-title">赛道</span>
                <el-select @change="selectChange" style="width:150px;" v-model="paramsList.raceName">
                    <el-option label="全部" :value="null"></el-option>
                    <el-option label="高燃混剪" :value="1000"></el-option>
                    <el-option label="测评解说" :value="1001"></el-option>
                    <el-option label="游戏介绍" :value="1002"></el-option>
                    <el-option label="游戏单默认" :value="2000"></el-option>
                </el-select>
                <span class="input-title">状态</span>
                <el-select @change="selectChange" style="width:150px;" v-model="paramsList.status">
                    <el-option label="全部" :value="null"></el-option>
                    <el-option v-for="(item, index) in statusName" :key="index" :label="item" :value="statusIndex[index]"></el-option>
                </el-select>
                <el-button type="success" class="btn" @click="getList(1)">搜索</el-button>
            </div>
            <div class="input-box">
                <span class="span-btn" @click="changeStatus(joinIdList, 1, 'all')">入围审核</span>
                <span class="span-btn" @click="changeStatus(joinIdList, 3, 'all')">发放奖励</span>
            </div>
        </div>
        <div class="table-box">
            <el-table :data="tableData" ref="table" border style="width: 100%" @selection-change="selectionChange">
                <el-table-column fixed="left" type="selection" width="55"></el-table-column>
                <el-table-column fixed="left" width="60" prop="videoid" label="ID"></el-table-column>
                <el-table-column min-width="160" prop="collectionActivityName" label="活动名称"></el-table-column>
                <el-table-column width="80" prop="userid" label="发布者ID"></el-table-column>
                <el-table-column width="120" prop="userName" label="发布者昵称">
                    <template slot-scope="scope">
                        <span class="table-btn" @click="goUserInfo(scope.row.userid)">{{ scope.row.userName }}</span>
                    </template>
                </el-table-column>
                <el-table-column width="100" label="发布者头像">
                    <template slot-scope="scope">
                        <div class="cover">
                            <img :src="scope.row.icon" alt="">
                        </div>
                    </template>
                </el-table-column>
                <el-table-column width="180" prop="cover" label="视频">
                    <template slot-scope="scope">
                        <div style="padding: 10px 0;">
                            <videoBox v-if="scope.row.mp4Url" :title="scope.row.title" :url="scope.row.mp4Url" :time="scope.row.duration" :img="scope.row.cover"/>
                            <div v-else>暂无视频</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column min-width="120" prop="title" label="视频标题"></el-table-column>
                <el-table-column min-width="120" prop="gameName" label="关联游戏"></el-table-column>
                <el-table-column min-width="100" prop="raceName" label="赛道"></el-table-column>
                <el-table-column width="80" label="状态">
                    <template slot-scope="scope">
                        <span v-if="scope.row.upStatus === -2">未上榜</span>
                        <span v-if="scope.row.upStatus === -1">未入围</span>
                        <span v-if="scope.row.upStatus === 0">已发布</span>
                        <span v-if="scope.row.upStatus === 3">奖励到账</span>
                        <div v-if="scope.row.auditType === 1">
                            <span v-if="scope.row.upStatus === 2">优质上榜</span>
                            <span v-if="scope.row.upStatus === 1">已入围</span>
                        </div>
                        <div v-else>
                            <span v-if="scope.row.upStatus === 2">优质上榜</span>
                            <span v-if="scope.row.upTime === 0 && scope.row.upStatus === 1">打榜期</span>
                            <span v-if="scope.row.upTime === 1 && scope.row.confirmStatus === 1 && scope.row.upStatus === 1">打榜核算中</span>
                            <span v-if="scope.row.upTime === 1 && !scope.row.currentlevelNum && scope.row.upStatus === 1">未上榜</span>
                            <p v-if="scope.row.level">{{ scope.row.level }}级</p>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column width="80" prop="currentNum" label="点赞数">
                    <template slot-scope="scope">
                        <div v-if="scope.row.auditType === 0">{{ scope.row.currentNum || 0 }}</div>
                        <div v-if="scope.row.auditType === 0 && scope.row.currentlevelNum">{{ scope.row.currentlevelNum }}级</div>
                        <div v-if="scope.row.auditType === 1">-</div>
                    </template>
                </el-table-column>
                <el-table-column min-width="100" prop="playNum" label="播放量"></el-table-column>
                <el-table-column min-width="100" label="10%播放量">
                    <template slot-scope="scope">
                        <span>{{ scope.row.onePlayFinish || 0 }}%</span>
                    </template>
                </el-table-column>
                <el-table-column min-width="100" label="30%播放量">
                    <template slot-scope="scope">
                        <span>{{ scope.row.threePlayFinish || 0 }}%</span>
                    </template>
                </el-table-column>
                <el-table-column min-width="100" label="50%播放量">
                    <template slot-scope="scope">
                        <span>{{ scope.row.fivePlayFinish || 0 }}%</span>
                    </template>
                </el-table-column>
                <el-table-column min-width="100" label="80%播放量">
                    <template slot-scope="scope">
                        <span>{{ scope.row.eightPlayFinish || 0 }}%</span>
                    </template>
                </el-table-column>
                <el-table-column min-width="100" label="重复观看率">
                    <template slot-scope="scope">
                        <span>{{ scope.row.samePlayFinish || 0 }}%</span>
                    </template>
                </el-table-column>
                <el-table-column min-width="100" label="粉丝观看比例">
                    <template slot-scope="scope">
                        <span>{{ scope.row.followPlayFinish || 0 }}%</span>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作">
                    <template slot-scope="scope">
                        <div v-if="scope.row.upStatus === 0">
                            <el-button @click="changeStatus(scope.row, 1)" type="text" size="small">入围</el-button>
                        </div>
                        <div v-if="scope.row.upStatus === 0">
                            <el-button @click="changeStatus(scope.row, -1)" type="text" size="small">未入围</el-button>
                        </div>
                        <div v-if="scope.row.currentlevelNum && scope.row.auditType === 0 && scope.row.upStatus === 1 && !scope.row.confirmStatus">
                            <el-button @click="levelChange(scope.row)" type="text" size="small">调级</el-button>
                        </div>
                        <div v-if="scope.row.currentlevelNum && scope.row.auditType === 0 && scope.row.upStatus === 1 && !scope.row.confirmStatus">
                            <el-button @click="changeStatus(scope.row, 2)" type="text" size="small">确定等级</el-button>
                        </div>
                        <div v-if="scope.row.auditType === 1 && scope.row.upStatus === 1">
                            <el-button @click="changeStatus(scope.row, 2)" type="text" size="small">录用</el-button>
                        </div>
                        <div v-if="scope.row.auditType === 1 && scope.row.upStatus === 1">
                            <el-button @click="changeStatus(scope.row, -2)" type="text" size="small">未录用</el-button>
                        </div>
                        <div v-if="scope.row.upStatus === 2">
                            <el-button @click="changeStatus(scope.row, 3)" type="text" size="small">发放奖励</el-button>
                        </div>
                        <div v-if="(scope.row.upStatus === 1 && !scope.row.currentlevelNum) || scope.row.upStatus === -1 || scope.row.upStatus === -2 || scope.row.upStatus === 3">-</div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="tools">
            <el-pagination
                @size-change="sizeChange"
                @current-change="pageChange"
                :current-page="pageNum"
                :page-sizes="_pageSizes"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
        <el-dialog title="调级" class="level-dialog" :visible.sync="levelDialogShow" width="350px">
            <div class="input-box">
                <span class="input-title">当前等级：</span>{{ currentLevelObj.currentlevelNum }}级
            </div>
            <div class="input-box">
                <span class="input-title">调级为：</span>
                <el-select style="width: 240px;" v-model="level">
                    <template v-for="(item, index) in ['S', 'A', 'B', 'C']">
                        <el-option v-if="currentLevelObj.currentlevelNum !== item" :key="index" :label="item" :value="item"></el-option>
                    </template>
                </el-select>
            </div>
            <el-button type="success" class="btn" @click="levelDialogShow = false">取消</el-button>
            <el-button type="success" class="btn" @click="saveLevel(0)">保存</el-button>
            <el-button type="success" class="btn" @click="saveLevel(1)">保存并确认等级</el-button>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data () {
        return {
            videoTitle: '',
            videoSrc: '',
            currentLevelObj: {},
            level: '',
            joinIdList: [],
            paramsList: {
                status: null,
                collectionActivityName: null,
                raceName: null
            },
            statusName: ['已发布', '已入围', '优质上榜', '奖励到账', '未入围', '未上榜'],
            statusIndex: [0, 1, 2, 3, -1, -2],
            tableData: [],
            pageNum: 1,
            pageSize: this._pageSize,
            total: 0,
            loading: false,
            levelDialogShow: false
        }
    },
    created () {
        this.getList(this.pageNum)
    },
    methods: {
        // 获取列表
        async getList (pageNum) {
            if (this.loading) return
            this.pageNum = pageNum
            this.loading = true
            let params = {
                pageNum: pageNum,
                pageSize: this.pageSize
            }
            params = Object.assign(params, this.paramsList)
            let res = await this.$http.get('/gameList/selectCollectionVideoList', { params })
            if (res.code === '0') {
                this.tableData = res.data
                this.total = res.count
            } else {
                this.$message({
                    type: 'error',
                    message: '系统异常，请稍后再试'
                })
            }
            this.loading = false
        },
        saveLevel (type) {
            let params = {
                joinId: this.currentLevelObj.joinId,
                level: this.level
            }
            this.$http.get('/gameList/changeLevel', { params }).then(res => {
                if (res.code === '0' && type === 0) {
                    this.$message({
                        type: 'success',
                        message: '调级成功'
                    })
                    this.getList(1)
                    this.levelDialogShow = false
                }
            })
            if (type) {
                this.changeStatus({ joinId: this.currentLevelObj }.joinId, 2)
            }
        },
        selectionChange (val) {
            val.map(item => {
                this.joinIdList.push(item.joinId)
            })
        },
        levelChange (item) {
            this.currentLevelObj = item
            this.levelDialogShow = true
        },
        goUserInfo (id) {
            const { href } = this.$router.resolve({
                path: '/dataReport/userInfo',
                query: {
                    id
                }
            })
            window.open(href, '_blank')
        },
        selectChange (val) {
            this.getList(1)
        },
        changeStatus (item, auditStatus, type) {
            let joinIdList = null
            let message = ''
            let flag = true
            if (type === 'all') {
                this.tableData.map(it => {
                    item.map(id => {
                        if (auditStatus === 3) {
                            if (it.joinId === id && it.upStatus !== 2) {
                                flag = false
                                message = '有未满足发放奖励标准的视频'
                            }
                        }
                        if (auditStatus === 1) {
                            if (it.joinId === id && it.upStatus !== 0) {
                                flag = false
                                message = '所选列表中包含已入围视频'
                            }
                        }
                    })
                })
                joinIdList = [].concat(item)
            } else {
                joinIdList = [item.joinId]
            }
            if (!flag) {
                return this.$message({
                    type: 'warning',
                    message
                })
            }
            let params = {
                joinIdList,
                auditStatus
            }
            this.$http.post('/gameList/updateCollectionStatus', params).then(res => {
                if (res.code === '0') {
                    item.upStatus = auditStatus
                    this.$message({
                        type: 'success',
                        message: '修改成功'
                    })
                    this.getList(1)
                    this.levelDialogShow = false
                } else if (res.code === '80011') {
                    this.$message({
                        type: 'warning',
                        message: '无权限操作'
                    })
                } else {
                    this.$message({
                        type: 'error',
                        message: '系统异常，请稍后再试'
                    })
                }
            })
        },
        // 页码切换
        sizeChange (val) {
            this.pageNum = 1
            this.pageSize = val
            this.getList(1)
        },
        // 页容切换
        pageChange (val) {
            this.pageNum = val
            this.getList(this.pageNum)
        }
    }
}
</script>

<style lang="scss" scoped>
    .video-list {
        .input-box {
            margin-top: 10px;
            font-size: 13px;
            font-weight: 500;
            .input-title {
                margin: 0 10px 0 20px;
            }
            .btn {
                margin-left: 10px;
            }
            .span-btn {
                display: inline-block;
                margin: 20px 20px 5px 0;
                color: cadetblue;
                cursor: pointer;
            }
        }

        .table-box {
            margin-bottom: 20px;
            .cover {
                position: relative;
                width: 80px;
                height: 80px;
                > img {
                    width: 100%;
                    height: 100%;
                }
                .shadow-box {
                    position: absolute;
                    left: 0;
                    right: 0;
                    top: 0;
                    bottom: 0;
                    background-color: rgba($color: #000000, $alpha: 0.4);
                }
                .el-icon-video-play {
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    font-size: 30px;
                    color: #fff;
                    margin-left: -15px;
                    margin-top: -15px;
                    cursor: pointer;
                }
            }
            .table-btn {
                cursor: pointer;
                color: #409EFF;
                font-size: 13px;
                font-weight: 500;
                &:hover {
                    text-decoration: underline;
                }
            }
        }

        .tools {
            padding-right: 20px;
            display: flex;
            justify-content: flex-end;
        }
        #video {
            width: 600px;
            max-height: 500px;
        }
        .level-dialog {
            .input-title {
                margin-left: 0;
            }
            .btn {
                margin-top: 10px;
            }
            /deep/.el-dialog__body {
                padding-top: 0;
                padding-bottom: 10px;
            }
        }
    }
</style>
